import {
  Divider, message, Row, Space
} from 'antd';
import { useCallback, useEffect, useState } from 'react';
import { useBoolean, useRequest } from 'ahooks';
import useUrlState from '@ahooksjs/use-url-state';
// import { useParams } from 'react-router-dom';

import Search from './search';
import Operation from './operation/index';
import Show from './show';

import * as APIS from '../../../constants/api-constants';

export default () => {
  const [page, setPage] = useState(1);
  const [total, setTotal] = useState(0);
  // const {
  //   currentTemplateUuid: initTemplateUuid,
  //   currentQuestionnaireUuid: initQuestionnaireUuid
  // } = useParams<{
  //   currentTemplateUuid: string,
  //   currentQuestionnaireUuid: string
  // }>();
  const [isExportDisable, {
    setTrue: setExportDisable,
    setFalse: setExportVisable
  }] = useBoolean(true);
  const [
    {
      currentTemplateUuid,
      currentQuestionnaireUuid
    }, setUrlState
  ] = useUrlState({
    currentTemplateUuid: '',
    currentQuestionnaireUuid: ''
  });

  const [answerList, setAnswerList] = useState<Answer.AnswerShowItem[]>();

  const { run, loading: tableLoading } = useRequest((
    currentPage: number,
    pageSize,
    templateUuid,
    questionnaireUuid,
  ) => ({
    url: APIS.ANSWER_LIST,
    method: 'GET',
    params: {
      templateUuid,
      questionnaireUuid,
      page: currentPage,
      pageSize
    }
  }), {
    manual: true,
    onSuccess: (result) => {
      const {
        total: answerCount,
        mergeUserQuestionnaireList: tableAnswerList
      } = result.data;
      setAnswerList(tableAnswerList);
      setTotal(answerCount);
    },
    onError: () => {
      message.error('table error');
    },
  });

  const requestTableData = useCallback((currentPage: number) => {
    if (currentTemplateUuid && currentQuestionnaireUuid) {
      run(
        currentPage,
        10,
        currentTemplateUuid,
        currentQuestionnaireUuid
      ).then(() => {
        setPage(currentPage);
      });
    }
  }, [currentTemplateUuid, currentQuestionnaireUuid]);

  const requestTableDataByTQUuid = useCallback((
    currentPage: number,
    templateUuid?: string,
    questionnaireUuid?: string
  ) => {
    if (templateUuid && questionnaireUuid) {
      run(
        currentPage,
        10,
        templateUuid,
        questionnaireUuid
      ).then(() => {
        setPage(currentPage);
      });
    }
  }, []);

  useEffect(() => {
    if (total === 0) {
      setExportDisable();
    } else {
      setExportVisable();
    }
  }, [total]);

  const clearTable = useCallback(() => {
    setAnswerList([]);
    setTotal(0);
  }, []);

  /** 同时设置 template questionnaire uuid */
  const setTQUuid = useCallback((
    templateUuid: string, questionnaireUuid: string
  ) => {
    setUrlState(() => ({
      currentTemplateUuid: templateUuid,
      currentQuestionnaireUuid: questionnaireUuid
    }));
  }, []);

  return (
    <>
      <Search
        currentTemplateUuid={currentTemplateUuid}
        currentQuestionnaireUuid={currentQuestionnaireUuid}
        setCurrentQuestionnaireUuid={(uuid) => setUrlState(() => ({
          currentQuestionnaireUuid: uuid
        }))}
        setTQUuid={setTQUuid}
        requestTableDataByTQUuid={requestTableDataByTQUuid}
        clearTable={clearTable}
      />
      <Divider />
      <Space direction="vertical">
        <Row justify="space-between">
          <span>
            总计：
            {total}
          </span>
          <Operation
            currentTemplateUuid={currentTemplateUuid}
            currentQuestionnaireUuid={currentQuestionnaireUuid}
            isExportDisable={isExportDisable}
          />
        </Row>
        <Show
          total={total}
          page={page}
          tableLoading={tableLoading}
          answerList={answerList}
          requestTableData={requestTableData}
        />
      </Space>
    </>
  );
};
